<template name="bolgBox">
	<view class="bolgAssembly">
		<view class="bolgContent" v-for="(item, index) in bolgModular" :key="index">
			<!-- 头部区域 -->
			<view class="bolgHead">
				<view class="bolgHeadTitle">{{item.title}}</view>
				<view class="bolgHeadDate">
					<view>
						<text class="iconfont" :class="item.date_icon"></text>{{item.date}}
					</view>
					<view>
						<text class="iconfont" :class="item.read_icon"></text>{{item.read}}
					</view>
				</view>
				<view class="bolgHeadInfo">
					<image :src="item.path" mode="scaleToFill"></image>
					<text>{{item.name}}</text>
					<button class="gradeBtn"  size="mini" :style="{'background':item.followBg}">{{item.follow}}</button>
				</view>
			</view>
			<!-- 内容区域 -->
			<view class="bolgConter">
				{{item.bolgConterTxt}}
			</view>	
			<!-- 操作区域 -->
			<view class="bolgFoot">
				<view class="operate" >
					<text class="iconfont" :class="item.fabulousIcon"></text>
					{{item.fabulous}}
				</view>
				<view class="operate">
					<text class="iconfont" :class="item.collectIcon"></text>
					{{item.collect}}
				</view>
				<view class="operate">
					<text class="iconfont" :class="item.forwardIcon"></text>
					{{item.forward}}
				</view>
				<view class="operate">
					<text class="iconfont" :class="item.answerIcon"></text>
					{{item.answer}}
				</view>
			</view>
			
			<!-- 评论表单 -->
			<view class="messageForm">
				<input type="text" value="" maxlength="15" placeholder="写评论"/>
				<button type="default" size="mini" class="messageBtn">{{item.messageBtn}}</button>
			</view>
		
			<!-- 评论区域 -->
			<view class="bolgMessage">
				<view class="messageHeader">
					{{item.messageTitle}}{{item.messageNumber}}
				</view>
				<view class="messageView" v-for="(item, index) in messageView" :key="index">
					<text class="messageUser">{{item.messageUser}}:</text>
					{{item.messageTxt}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default{
	name:"bolgBox",
	props:{
			
			bolgModular:{
				title:{
					type: String,
					default: ''
				},
				date:{
					type: String,
					default: ''
				},
				path:{
					type: String,
					default: ''
				},
				name:{
					type: String,
					default: ''
				},
				follow:{
					type: String,
					default: ''
				},
				bolgConterTxt:{
					type: String,
					default: ''
				},
				fabulous:{
					type: String,
					default: ''
				},
				fabulousIcon:{
					type: String,
					default: ''
				},
				collect:{
					type: String,
					default: ''
				},
				collectIcon:{
					type: String,
					default: ''
				},
				forward:{
					type: String,
					default: ''
				},
				forwardIcon:{
					type: String,
					default: ''
				},
				answer:{
					type: String,
					default: ''
				},
				answerIcon:{
					type: String,
					default: ''
				},
				messageBtn:{
					type: String,
					default: ''
				},
				messageTitle:{
					type: String,
					default: ''
				},
				messageNumber:{
					type: String,
					default: ''
				}
			},
			messageView:{
				messageUser:{
					type: String,
					default: ''
				},
				messageTxt:{
					type: String,
					default: ''
				}
			}
		},
	data(){
		return{
			
		}
	},
	methods:{

	}
}	
</script>
<style  lang="scss">
	@import "../../icon/iconfont.css";
	.bolgContent{
		.bolgHead,
		.bolgFoot,
		.bolgConter,
		.messageForm,
		.bolgMessage{
			background-color: $uni-bg-color;
			margin-bottom: 2rpx;
			font-size: $uni-font-size-lg;
			letter-spacing: $uni-spacing-row-one;
			padding: $uni-spacing-col-lg;
			color: $uni-text-color-placeholder;
			.bolgHeadTitle{
				font-size: $uni-font-size-title;
				color:$uni-color-title;
				letter-spacing: $uni-spacing-row-one;
			}
			.bolgHeadDate{
				font-size: $uni-font-size-six;
				padding:$uni-spacing-row-sm 0 $uni-spacing-col-lg 0;
				display: flex;
				justify-content:space-between;
				.iconfont{
					font-size: $uni-font-size-lg;
				}
			}
			.bolgHeadInfo{
				display: flex;
				align-items: center;
				position: relative;
				image{
					width: 90rpx;
					height: 90rpx;
					border-radius: 100%;
				}
				text{
					font-size: $uni-font-size-base;
					padding-left: $uni-spacing-row-base;
				}
				.gradeBtn{
					position: absolute;
					right: 0;
				}
			}
		}
		.bolgFoot{
			display: flex;
			align-items: center;
			.operate{
				width: 25%;
				text-align: center;
				font-size: $uni-font-size-base;
				.iconfont{
					font-size: $uni-font-size-lgx;
				}
			}
		}
		.messageForm{
			margin: 20rpx 0;
			display: flex;
			justify-content: space-between;
			input{
				border: 1rpx solid $uni-bg-color-maskxs;
				height: 70rpx;
				border-radius: $uni-border-radius-lg;
				font-size: $uni-font-size-base;
				padding: 0 $uni-spacing-row-sm;
				width: 67%;
			}
			.messageBtn{
				background-color:$uni-color-error;
				margin: 0;
				height: 74rpx;
				line-height: 74rpx;
				color: $uni-bg-color;
			}
		}
		.bolgMessage{
			.messageHeader{
				font-size: $uni-font-size-title;
			}
			.messageView{
				font-size: $uni-font-size-base;
				padding-top: $uni-spacing-row-lg;
				text{
					color: $uni-color-black;
				}
			}
		}
	}
	
</style>
